<script setup>
defineProps({
    item:{
        type:Object,
    }
})

</script>
<template>
  <router-link :to="`/detail/${item.id}`">
       <!-- 图片 -->
    <div class="img">
        <img v-imgLazy="item.picture" alt="">
    </div>
        <!-- 内容和价格 -->
        <div class="price">
            <p class="introduce ellipsis" style="margin: 10px 0;" v-if="item.name">{{ item.name }}</p>
            <p class="introduce ellipsis" v-else>{{ item.title }}</p>
            <section>
                <span class="price2" style="color: red; font-weight: 700;" v-if="item.price">$ {{ item.price }}</span>
                <span class="price1"  v-else>{{ item.alt }}</span>
            </section>
        </div>
    </router-link>
</template>
<style scoped>
.Fresh ul li a{
    display: block;
    width: 100%;
    height: 100%;
   }
    .Fresh ul li:hover{
        transform: translate(-5px);
        box-shadow: 0px -5px 20px #b7b3b3;
        transition: all .5s;
    }
   .Fresh ul li a .img{
    height: 260px;
    width: 100%;
   }
   .Fresh ul li a .introduce{
    text-align: center;
    margin-bottom: 5px;
    padding: 0 10px;
   }
    .Fresh ul li a .price1{
        display: block;
        width: 100%;
        color: red;
        font-weight: 700;
        text-align: center;
    }
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>